<template>
  <section class="mx-auto mt-[120px] text-white md:max-w-6xl">
    <h1 class="mt-8 text-center text-4xl">最新文章</h1>
    <h2 class="my-6 text-center text-lg">
      <div>Explore the Latest in News, Trends, and Community Events with Leonardo.</div>
      <div>Ai Your Source for Creativity and Industry Insights</div>
    </h2>
    <div class="text-white">
      <nuxt-link to="/admin/article/create">新增文章</nuxt-link>
    </div>
  </section>
  <!-- 分类 -->
  <categorys @change="onChangeCategory"></categorys>

  <newsList :type="categoryType"></newsList>
</template>

<script setup lang="ts">
import categorys from '~/pages-components/news/categorys.vue'
import newsList from '~/pages-components/news/news-list.vue'

const route = useRoute()

const categoryType = ref(route.query.type || '')

const onChangeCategory = (type) => {
  categoryType.value = type
}
</script>

<style lang="scss" scoped></style>
